<template>
  <div class="docker">
    <span v-for="(item,index) in dockerList" :class="{'docker__item':true,'docker__item--active':index==0}" :key="item.icon">
      <div class="iconfont" v-html="item.icon"></div>
      <div class="docker__titie">{{item.text}}</div>
    </span>
  </div>
</template>

<style lang="scss" scoped>
@use "@/style/viriables" as *;
@use "@/style/mixins" as *;
.docker {
  display: flex;
  position: absolute; /*绝对定位*/
  padding: 0 .18rem;
  box-sizing: border-box; /*margin+padding+content 不能超过本来的*/
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: .01rem solid $content-bgcolor;
  /*background: green;*/
  color: $content-fontcolor;
  /*& 表示.docker*/
  &__item {
    flex: 1;
    text-align: center;

    .iconfont {
      margin: .07rem 0 .02rem 0;
      font-size: .18rem;
    }

    &--active {
      color: #1FA4FC;
    }
  }

  &__titie {
    font-size: .2rem;
    transform: scale(.5, .5);
    transform-origin: center top;
  }
}
</style>

<script>
export default {
  name: "Docker",
  setup(){
    const dockerList = [
      {icon:'&#xe7c6;',text:'首页'},
      {icon:'&#xe6af;',text:'购物车'},
      {icon:"&#xe60e;",text:'订单'},
      {icon:"&#xe78b;",text:'我的'},
    ];
    return {dockerList}
  }
}
</script>